<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { NDataTable, NButton, NCard } from 'naive-ui'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import { useMenuRecordStore } from '@/stores/menuRecord'
import { useRouter,useRoute } from 'vue-router';

import { sseService } from "@/assets/utils/sse";
import type { SSEChatParams } from "@/assets/utils/sse";

const router = useRouter()
const route = useRoute()
const menuRecord = useMenuRecordStore()

console.log(route);


const qd:any = route.query.data
const str =  decodeURIComponent(qd)
const qdArr = JSON.parse(str) 
const qdlist =  qdArr[5]

// console.log('qdlistqdlistqdlist',qdlist);



let urls = qdArr['6']//'https://192.168.0.2:4433/events?appId=89f05b55d5c1ba09&userId=dskjadksa'

const tablelist = ref<any>()

const pagination  = ref<any>({
    pageSize: 10
})

const columns = ref<any[]>([
    // {
    //     title: '金额11',
    //     key: '金额1'
    // },{
    //     title: '金额',
    //     key: '金额'
    // }

])

const data:any = ref([])


for (let index = 0; index < qdlist.length; index++) {
  
    console.log(qdlist[index]['名称']);
    columns.value.push({
        title: qdlist[index]['名称'],
        key: qdlist[index]['名称']
    })
}



onMounted(() => {
    sseServiceOpen()
})
onUnmounted(() => {
    sseService.disconnect()
})






//see 链接
function sseServiceOpen() {
    console.log(sseService);

    const onopen = () => {
        console.log("建立无敌 sse 连接成功")
    }
    // 建立连接
    let sseChatParams: SSEChatParams = {
        onopen,
        url: urls,
        onmessage: (event: MessageEvent) => {
            // 收到消息
            console.log('收到消息xsssx：', event.data);
            //   let result: any = []
              let a = JSON.parse(event.data);
              console.log('', a);
              data.value.push(a)
        },
        finallyHandler: () => {
            console.log("finallyHandler操作")

        }
    };
    sseService.connect(sseChatParams)
}






</script>
<template>
   
    <baseCard title="生产数据报表">
        <baseTable :columns="columns" :data="data" :bordered="false"  :maxHeight="500"></baseTable>
    </baseCard>

</template>

<style src="./index.scss" scoped></style>
